<template>
	<div class="order-info-page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		 <div class="order-info-top">
			 <div class="order-state">
				 <div class="main-text">{{info.orderStateName}}</div>
			 </div>
		 </div>
		  <div style="padding:0 32rpx;margin-top:-80rpx;">
			  <div class="order-block" style="margin-top:0">
			  	 <u-cell-group :border="false">
			  		<u-cell>
			  			<view slot="title" class="u-slot-title">公司名称</view>
			  			<text slot="value" class="u-slot-value">{{info.companyName}}</text>
			  		</u-cell>	
			  	 </u-cell-group>
				 <div class="order-info-adr"  v-if="info.orderShippingType != '自提'">
					 <div class="adr-info">
						 <div class="adr-top"><span class="name">{{info.receiverName}}</span><span class="phone">{{info.receiverTel}}</span></div>
						 <div class="adr-bottom">
						  <div class="img" style="vertical-align: middle;"><img src="https://pic.moresu.com/FtDhwA1Djg2-Uy7KAoVGAyH7ZjjI" style="width:22rpx;height:28rpx;" mode="aspectFit"/></div>
						  <span style="vertical-align: middle;">{{info.receiverAddress}}</span>
						 </div>
					 </div>
				 </div>
			   </div>
			  
			   
			    <!--商品-->
			   <div class="order-block">
			  	 <div class="goods-info-block" style=" background: #fff;">
			  		<div class="order-item-top link-bg">
						 <div class="store-name">
						   <img src="https://pic.moresu.com/FvShYHPyYqOYuAw8XrzLzHsayNb9" style="width: 38rpx;height:31rpx;display: inline-block;vertical-align: middle;"/>
						   <span style="padding-left:10rpx;vertical-align: middle;">{{info.sellerStore}}</span>
						 </div>
			  		</div>
			  		 <div class="goods-item">
			  			 <div class="goods-info">
							 <div class="goods-name">{{info.inquiryTitle}}</div>
							 <div class="order-row" style="margin-top:20rpx;">
								 <span class="label">交货方式：</span>
								 <span class="text">{{info.orderPayType}}{{info.orderShippingType}}</span>
							 </div>
							 <div class="order-row">
								 <span class="label">预计交货日期：</span>
								 <span class="text">{{info.receiveDate}}</span>
							 </div>
							 <div class="order-row">
								 <span class="label">货物单价：</span>
								 <span class="text">{{info.goodsPrice}}元/吨</span>
							 </div>
							 <div class="order-row">
								 <span class="label">货物数量：</span>
								 <span class="text">{{info.goodsNum}}吨</span>
							 </div>
							 <div class="order-row">
								 <span class="label">发货地区：</span>
								 <span class="text">{{info.sendArea}}</span>
							 </div>
							 <div class="order-row">
								 <span class="label" style="white-space:nowrap"> 产品说明：</span>
								 <span class="text">{{info.colorProducerWeightRemarkStr}}</span>
							 </div>
			  			 </div>
			  		 </div>
			  	 </div>
			   </div>
			    <div class="order-block" v-if="info.source == 'goodsId' && info.orderShippingType == '送到'&& info.orderState == 0 && info.isSelfSale != 1">
					 <div class="order-title">
						 运费填写
						 <div style="margin-top:20rpx">
							 <u--input
							     type="number"
							     placeholder="请输入运费"
							     border="surround"
							     v-model="freight"
							   ></u--input>
						 </div>
						 
					 </div>
				</div>
			   
			   <div class="order-block">
				   <div class="goods-info" style="padding:32rpx">
					   <div class="order-row">
						 <span class="label">商品金额：</span>
						 <span class="text">￥{{info.goodsPriceTotal}}</span>
					   </div>
					   <div class="order-row">
						 <span class="label">成交后佣金：</span>
						 <span class="text">￥{{info.serviceCharge}}</span>
					   </div> 
					   <div class="order-row"  v-if="info.couponAmount > 0">
						 <span class="label">已优惠：</span>
						 <span class="text">￥{{info.couponAmount}}</span>
					   </div> 
					   <div class="order-row" style="justify-content:flex-end" v-if="info.source == 'goodsId' && info.orderShippingType == '送到'&& info.orderState == 0 && info.isSelfSale != 1">
							 <span class="label">合计总额：</span>
							 <span class="text" style="color:#ff0000;font-weight: bold;font-size:32rpx">￥{{ info.orderAmount  | fifcoutorderAmount(freight)}}</span>
							 <span v-if="freight === ''">(不含运费)</span>
							 <span v-else>(含运费)</span>
					   </div>
					   <div class="order-row" style="justify-content:flex-end" v-else>
							 <span class="label">合计总额：</span>
							 <span class="text" style="color:#ff0000;font-weight: bold;font-size:32rpx">￥{{info.orderAmount}}</span>
							 <span v-if="(info.source == 'goodsId' && info.orderShippingType == '送到')">{{info.orderShippingFee !== '' ? '(含运费'+info.orderShippingFee+'元)' : '(不含运费)'}}</span>
					   </div>
				   </div>
			   </div>
			   
			   <div class="order-block">
				   <div class="order-title">订单信息</div>
				   <div class="goods-info" style="padding:0 32rpx 32rpx 32rpx">
					   <div class="order-row">
						 <span class="label">订单编号：</span>
						 <span class="text">{{info.orderSn}}</span>
					   </div>
					   <div class="order-row" v-if="info.createTime">
						 <span class="label">下单时间：</span>
						 <span class="text">{{info.createTime}}</span>
					   </div>
					   <div class="order-row" v-if="info.sellerUploadContractTime">
						 <span class="label">卖家签约时间：</span>
						 <span class="text">{{info.sellerUploadContractTime}}</span>
					   </div>
					   <div class="order-row" v-if="info.buyerUploadContactTime">
						 <span class="label">买家签约时间：</span>
						 <span class="text">{{info.buyerUploadContactTime}}</span>
					   </div>
					   <div class="order-row" v-if="info.orderPayTime">
						 <span class="label">付款时间：</span>
						 <span class="text">{{info.orderPayTime}}</span>
					   </div>
					   <div class="order-row" v-if="info.orderSendTime">
						 <span class="label">发货时间：</span>
						 <span class="text">{{info.orderSendTime}}</span>
					   </div>
					   <div class="order-row" v-if="info.invoiceTime">
						 <span class="label">开票时间：</span>
						 <span class="text">{{info.invoiceTime}}</span>
					   </div>
					   <div class="order-row" v-if="info.orderReceiveTime">
						 <span class="label">完成时间：</span>
						 <span class="text">{{info.orderReceiveTime}}</span>
					   </div>
					   <div class="order-row" v-if="info.contractUrl != '' && info.orderState >= 20 ">
						 <span class="label">合同附件：</span>
						 <span class="text" @click="preview(info.contractUrl)">查看</span>
					   </div>
					   <div class="order-row">
						 <span class="label" style="white-space:nowrap">订单备注：</span>
						 <span class="text">{{info.orderRemark}}</span>
					   </div>
				   </div>
				
				  <div style="overflow: hidden;border-top:1px solid #eee;">
					<div class="u-flex">
						<u-button @click="callPhone(info.buyerPhone)" icon="phone" text="联系买家" type="primary" :plain="true" :custom-style="{'border':'0'}"></u-button>
		    
						<!-- #ifdef MP -->
						<u-button icon="kefu-ermai" text="客服介入" type="primary" :plain="true" :custom-style="{'border':'0'}" openType="contact"></u-button>
						<!--#endif -->
						<!-- #ifdef H5 | APP-PLUS -->
						 <u-button icon="kefu-ermai" text="客服介入" type="primary" :plain="true" :custom-style="{'border':'0'}" @click="callPhone(contactMobile)"></u-button>
						<!--#endif -->
						
					</div>
				  </div>
			  </div>
			  
			  
			  <div class="order-block" v-if="info.orderState > 20">
				  <u-cell-group :border="false">
						<u-cell isLink  @click="toOrderUrl('/pagesUser/order/payInfo')" v-if="info.orderState > 20">
							<view slot="title" class="u-slot-title">支付信息</view>
							<text slot="value" class="u-slot-value"></text>
						</u-cell>
						<u-cell isLink  @click="toOrderUrl('/pagesUser/order/sendInfo')" v-if="info.orderState > 30">
							<view slot="title" class="u-slot-title">发货信息</view>
							<text slot="value" class="u-slot-value"></text>
						</u-cell>
						<u-cell isLink  @click="toOrderUrl('/pagesUser/order/invoiceInfo')" v-if="info.orderState > 50">
							<view slot="title" class="u-slot-title">开票信息</view>
							<text slot="value" class="u-slot-value"></text>
						</u-cell>
				  </u-cell-group>
			  </div>
			  
			  <div class="order-block">
			  	<div class="order-title">操作记录</div>
			  	<div style="padding:10px 15px">
			  		<u-read-more :showHeight="100" :toggle="true" closeText="展开" :shadowStyle="shadowStyle" ref="uReadMore">
			  			<u-steps  direction="column" dot>
			  					<u-steps-item :title="item.log_time" v-for="item in info.orderLog" :key="item.olp_id">
			  						<div slot="desc" style="font-size:14px">
			  						{{item.log_msg}}
			  						<span style="padding-left:5px;cursor: pointer;color:#FF5E01" v-if="item.file.length > 0" @click="preview(item.file)">查看</span>
			  						</div>
			  					</u-steps-item>
			  				</u-steps>
			  		</u-read-more>
			  	</div>
			  </div>
			  	
			  		
		  </div>
		 
		<view class="page-bottom-btn" :style="{paddingLeft:'20rpx',paddingRight:'20rpx'}"
		v-if="info.orderState == 0 || info.orderState == 30 || info.orderState == 50" style="">
			<u-button text="确认签约" type="primary" shape="circle"  v-if="info.orderState == 0 && (info.isSelfSale != 1 || (info.isSelfSale == 1 && info.orderShippingFee !== ''))" @click="showDown(info)"></u-button>
			<u-button text="确认发货" type="primary" shape="circle"  v-if=" info.orderState == 30" @click="showSend(info)"></u-button>
			<!-- <u-button text="上传收货凭证" type="primary" shape="circle"  v-if=" info.shouHuo && info.orderState == 40 && info.shouHuo.orderReceiveCertificate == ''" @click="showTake(info)"></u-button> -->
			<u-button text="确认开票" type="primary" shape="circle"  v-if=" info.orderState == 50" @click="showInvoice(info)"></u-button>
		</view>
		
		<downloadImg ref="downloadImg" @refresh="getInfo"></downloadImg>
		<sendOrder ref="sendOrder" @refresh="getInfo"></sendOrder>
		<takeOrder ref="takeOrder" @refresh="getInfo"></takeOrder>
		<invoiceOrder ref="invoiceOrder" @refresh="getInfo"></invoiceOrder>
		
		 <u-modal :show="showModal" title="操作提示" content='签约前方便汇款，请先维护银行收款帐号' confirmText="去维护" @confirm="confirm" @cancel="showModal=false" :showCancelButton="true"></u-modal>
	 
	</div>
</template>

<script>
	import{imgCheck} from '@/plugins/upload/upload.js'
	import {getOrderDetail,pageSeo,commonData} from '@/config/api.js'
	import downloadImg from '@/components/module/downloadImg';
	import sendOrder from '@/components/module/sendOrder';
	import takeOrder from '@/components/module/takeOrder';
	import invoiceOrder from '@/components/module/invoiceOrder';
	  import base from '@/config/baseUrl.js';
	export default {
	    components:{
	       downloadImg,sendOrder,takeOrder,invoiceOrder
	    },
	    data() {
	        return {
				fileList1: [],
				orderId:'',
				info:{},
				shadowStyle:{
					 // #ifndef APP-NVUE
					    backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
					    // #endif
					    // #ifdef APP-NVUE
					    // nvue上不支持设置复杂的backgroundImage属性
					    backgroundImage: "linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5))",
					    // #endif
					    paddingTop: "100px",
					    marginTop: "-100px",
						zIndex:1
				},
				showModal:false,
				freight:'',
				contactMobile:''
	        }
	    },
	    async onLoad(e) {
			await this.$onLaunched;
			this.orderId = e.orderId
			commonData().then((res)=>{
				this.contactMobile = res.contactMobile
			})
	        
	    },
	    async onShow() {
			 await this.$onLaunched;
			 this.getInfo();
			 // #ifdef H5
			 	pageSeo({pageType: 'indexPage'}).then((res)=>{
			 		document.title = res.pageTitle;
			 	})
			 // #endif	
		 },
		  filters: {
			 fifcoutorderAmount(val,val2){
			   let num = val ? parseFloat(val) : 0
			   let num2 = val2 ? parseFloat(val2) : 0
			   return num+num2.toFixed(4)*1
			 },
		   },
	    methods: {
			toOrderUrl(url){
				uni.navigateTo({
				    url:url+'?orderId='+this.orderId
				})
			},
			preview(url){
				let linkUrl = [];
				linkUrl = Array.isArray(url) ? url : [url]
				uni.previewImage({urls: linkUrl});
			},
			showInvoice(item){
				this.$refs.invoiceOrder.init(item)
			},
			showTake(item){
				this.$refs.takeOrder.init(item)
			},
			showSend(item){
				this.$refs.sendOrder.init(item)
			},
			showDown(item){
				if(item.bankNumber){
					if(this.info.source == 'goodsId' && this.info.orderShippingType == '送到' && this.freight === ''&& this.info.isSelfSale != 1){
						uni.showToast({
						  title: '请完成运费填写后再进行签约!',
						  duration: 1000,
						  icon: 'none'
						})
					}else{
						this.$refs.downloadImg.init(item,this.freight)
					}
					
				}else{
					this.showModal = true	
				}
				// this.$refs.downloadImg.init(item)
			},
			confirm(){
				this.showModal = false
				uni.navigateTo({
				  url: '/pagesUser/business/businessInfo'
				}) 
			},
			callPhone(num){
				uni.makePhoneCall({
					phoneNumber: num+''
				})
			},
			//获取详情
			getInfo(){
				getOrderDetail({orderId:this.orderId}).then((res)=>{
					this.info = res;
					this.$refs.uReadMore.init();
				})
			},
			// 删除图片
			deletePic(event) {
				// this[`fileList${event.name}`].splice(event.index, 1)
			},
			 // 新增图片
			 afterRead(event) {
				uni.showLoading({
					title: '上传中',
				});
				imgCheck(event.file.url).then((res)=>{
					console.log(res)
					this.fileList1 = [];
					if(res != ''){
						this.fileList1.push({url:res})
					}
					uni.hideLoading()
				}).catch(()=>{
					uni.hideLoading()
				})
			},
	           
	        
	    }
	
	}
</script>

<style lang="scss">
	@import '@/style/common.scss';
	.order-info-page{
	  min-height: 100vh;
	  padding-top:0;
	  background: $background-color;
	  padding-bottom:66px;
	  .order-info-top{
	    height:238rpx;
	    background:url('https://pic.moresu.com/FoUj7Mx48tOoLJ2b2nVvrDQN8KsX');
		background-size: cover;
		padding-top:68rpx;
	    color:#fff;
	    .order-state{
	      width:60%;
	      padding-left:20px;
	      .main-text{
	        font-size:$b-font;
			font-weight: bold;
	      }
	      .sub-text{
	        margin-top:10px;
	        font-size:$s-font;
	      }
	    }
	    .order-img{
	      width:40%;
	      padding-right:20px;
	      text-align: right;
	      image{
	        width:100px
	      }
	    }
	  }
	  .order-info-adr{
	    padding:24rpx 32rpx;
	    background: #fff;
	    .adr-info{
	      font-size:$m-font;
	      color:$font-color;
	      width:calc(100% - 30px);
		  background: #fff;
	      .adr-top{
	        line-height: 22px;
			margin-bottom:10rpx;
	        .name{
	          font-weight: bold;
	          padding-right:10px
	        }
	      }
		  .img{
			display: inline-block;
		    width:36rpx;
		    image{
		      width:100%;
		    }
		  }
	    }
	  }
	  .order-block{
	    margin-top:36rpx;
		background: #fff;
		box-shadow: 0px 0px 10rpx rgba(42,11,0,0.09);
		border-radius: 18rpx;
		overflow: hidden;
		.u-slot-title{
			font-size:$m-font
		}
		.u-slot-value{
			font-size:$m-font
		}
		.order-title{
			font-size:$m-font;
			padding:10px 15px;
			padding-left:28px;
			position: relative;
		}
		.order-title::after{
			content: " ";
			width: 9rpx;
			height: 20rpx;
			background: linear-gradient(180deg, #FF5E01 0%, #FF5E01 100%);
			border-radius: 5rpx;
			position: absolute;
			left:15px;
			top:15px;
		}
		.order-row{
			line-height: 48rpx;
			font-size:24rpx;
			@include flexbox(space-between,flex-start);
			.label{
				color:#B8B8B8
			}
			.text{
				color: #000;
			}
		}
	
	  };
	  .order-price-block{
		  .order-price-label{
			  font-size:$m-font;
		  }
		  .order-price-text{
			  font-size:$m-font;
			  color:#ff0000;
			  font-weight:bold;
			  text-align: right;
		  }
	  }
	  .order-item-top{
	
	    padding:10px 16px;
	    font-size:$m-font;
		@include flexbox(space-between,center);
	    position: relative;
	    .store-name{
	      color:$font-color;
	      @include textoverflow(1);
	      padding-right:10px;
	    }
	    .order-state{
	      color:$theme-color;
	      white-space: nowrap;
	    }
	  }
	  .order-item-top:after{
	    @include borderBottom(); 
	  }
	  .goods-item{
	    @include flexbox(flex-start,center);
	    padding:32rpx;
	    .goods-info{
		   width:100%;
	      .goods-name{
	        font-size:$m-font;
	        color:$font-color;
			font-weight: bold;
	      }
	      .goods-attr{
	        margin-top:5px;
	        font-size:$s-font;
	        color:$g-font-color
	      }
	      .goods-price-num{
	        margin-top:5px;
			@include flexbox(space-between,center);
	        .price{
	          font-size:$m-font;
	          color:$theme-color
	        }
	        .num{
	          font-size:$s-font;
	          color:$g-font-color;
			  float:right;
	        }
	      }
	    }
	  }
	  .orderRemark{
	    @include flexbox(flex-start,flex-start);
	    background: #fff;
	    padding:10px 16px;
	    font-size:$m-font;
	    color:$font-color;
	    .label{
	      width:80px;
	
	    }
	    .text{
	      width:calc(100% - 80px)
	    }
	  }
	  .order-info-block{
	    background: #fff;
	    padding:16px;
	    .info-title{
	      border-left:2px solid $theme-color;
	      font-size:$m-font;
	      color:$font-color;
	      line-height: 16px;
	      padding-left:10px;
	      margin-bottom:10px;
	    }
	    .info-con{
	      .info-row{
		   @include flexbox(flex-start,flex-start);
	        padding-left:10px;
	        font-size:$m-font;
	        line-height:26px;
	        .label{
	          color:$g-font-color;
	          width:80px;
	        }
	        .text{
	          width:calc(100% - 80px);
	          color:$font-color
	        }
	      }
	    }
	  }
	  .page-bottom-btn{
	    position: fixed;
	    height:50px;
	    background: #fff;
	    width:100%;
	    bottom:0;
	    padding:0 10px;
		z-index: 5;
		@include flexbox(flex-start,center);
	    .bottom-left{
	      width:40%;
	      font-size:$m-font;
	      span{
	        color:$theme-color
	      }
	    }
	    .bottom-right{
	      width:60%;
	      text-align: right;
	    }
	  }
	  .releaseBaoJia{
	    .title{
	      font-size:$b-font;
	      color:$font-color;
	      text-align: center;
	      height:50px;
	      line-height: 50px;
	      position: relative;
	    }
	    .title:after{
			@include borderBottom()
	    }
	    .van-cell:first-child input.van-field__control{
	      text-align: right;
	    }
	  }
	}
	
</style>